<template>
	<view :class="'bgmusic '+ activity" @click="musicBtn()">
		<image class="mimg" v-if="status=='play'" src="/static/on.png" mode="scaleToFill"></image>
		<image class="mimg" v-else src="/static/off.png" mode="scaleToFill"></image>
	</view>
</template>

<script>
	import platform from '@/src/platform'
	export default {
		name:"bgmusic",
		data() {
			return {
				status:'play',
				activity:''
			};
		},
		mounted() {
			if(wx.bgMusic){
				if(wx.musicStatus=='pause'){
					this.stop()

				}else{
					this.play()
				}
				wx.bgMusic.onPlay = ()=>{
					this.status='play';
					wx.musicStatus = 'play';
				}
				wx.bgMusic.onStop = ()=>{
					this.status='pause';
					wx.musicStatus = 'pause';
				}
			}
			this.activity = wx.activity;
			wx.musicInstance = this;
		},
		beforeDestroy() {
			wx.bgMusic&&wx.bgMusic.offPlay();
			wx.bgMusic&&wx.bgMusic.offStop();
		},
		onLoad() {
			if(wx.bgMusic){

			}
		},
		methods:{
			musicBtn(){
				if(!wx.bgMusic){
					return false;
				}
				if(wx.musicStatus=='play'){
					this.stop();
				}else{
					this.play()
				}
			},
			stop(){
				wx.bgMusic.stop();
				this.status='pause';
				wx.musicStatus = 'pause';
			},
			play(){
				wx.bgMusic.play();
				wx.musicStatus = 'play';
				this.status='play';
			}
		}
	}
</script>
<style lang="scss" scoped>
.bgmusic{
	position:fixed;
	z-index: 99999;
	width:76rpx;
	height:70rpx;
	top:355rpx;
	left:5rpx;
	&.activeB{
		top:20rpx;
		left:20rpx;
	}
	.mimg{
		position: absolute;
		left:0;
		top:0;
		width:100%;
		height:100%;
	}

}
</style>